@extends('master')
@section('style')
<style>
	#content{margin-top: 80px; }
	.search-content{padding:30px 0px; font-size: 14px; }
	.inbox-title{border-bottom: 1px solid #ddd;padding-bottom: 10px;}
	/*.msg-info-null{border: 2px dashed #ddd;border-radius: 10px;height: 60px;line-height: 60px;margin-top: 10px;opacity: 0.7;}*/
	.inbox-list{min-height: 400px;}
	.inbox-alert{margin-top: 30px;}
	#name_list{position: absolute;top: 34px;left: 0px;background: #ddd;line-height: 40px;}
	#chat-list{border: 2px dashed #ddd;padding: 0px;margin-bottom: 20px;border-radius: 10px;}
	.chat-item{font-size: 14px;border-bottom: 1px solid #ddd;line-height: 30px;}
	.chat-item .nikename{color: red;}
</style>
@endsection
@section('content')
<!-- <div id="content">
	<center><h3>该功能正在建设中......敬请稍后</h3></center>
</div> -->
<div id="content" class="container">
	<div class="search-content col-md-12">
		<div class="inbox-title col-md-12">
			<div class="col-md-6">
				联系客服
			</div>
			<div class="col-md-6 text-right">
				<span id="clearChatList" class="btn btn-danger">清屏</span>
				<!-- <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#sendmsg" data-whatever="">写私信</button> -->
			</div>
		</div>
		<div id="msg_item" class="inbox-list col-md-12">
			<div class="col-md-6 col-md-offset-3" style="padding: 12px 0px;min-height: 50px;">
				<div id="chat-list" class="col-md-12" style="height: 300px;overflow-y: scroll;">
					<!-- <div class="col-md-12 text-right">你好!</div> -->
				</div>
				<form id="chat" action="" class="col-md-12 text-right">
					<label for="">
						<input class="form-control" type="text" name="chatVal" id="">
					</label>
					<span class="btn-chat btn btn-primary">发送</span>
				</form>
				<script>
					$(function(){
						$('.btn-chat').click(function(){
							$('#chat').submit();
						});
						$('#chat').submit(function(){
							var v = $('input[name=chatVal]').val();
							// 将表单中的值显示到内容框
							$('#chat-list').append('<div class="chat-item col-md-12 text-right"><span class="nikename">我</span>:'+v+'</div>')
							$.ajax({
								url: '/api/chat',
								type: 'post',
								dataType: 'json',
								data: {value: v},
								async: false,
								success:function(res){
									$('#chat-list').append('<div class="chat-item col-md-12 text-left"><span class="nikename">牛牛</span>:'+res.text+'</div>');
									scrollToLocation();
								}
							});

							$('input[name=chatVal]').val('');
							return false;
						});
						$('#clearChatList').click(function(){
							$('#chat-list').html('');
						});
					});
					function scrollToLocation() {
					  var mainContainer = $('#chat-list'),
					  scrollToContainer = mainContainer.find('.chat-item:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
					  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
					  //非动画效果
					  //mainContainer.scrollTop(
					  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
					  //);
					  //动画效果
					  mainContainer.animate({
					    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
					  }, 2000);//2秒滑动到指定位置
					}
				</script>
				<!-- <div class="col-md-1">
					<img style="border-radius: 10px;" src="holder.js/50x50?text=2&bg=#acf" alt="">
				</div> -->
				<!-- <div class="col-md-11">
					<div class="col-md-12" style="min-height: 22px;padding: 5px 15px;">
						<a href="">李元宝</a>: 是的
					</div>
					<div class="col-md-12" style="font-size: 12px;color: #999;padding-left: 0px;">
						<div class="col-md-6">昨天22:10</div>
						<div class="col-md-6 text-right">
							<a href="">查看对话</a><span> | </span>
							<a href="">回复</a><span> | </span>
							<a href="">举报</a><span> | </span>
							<a href="">删除</a>
						</div>
					</div>
				</div> -->
			</div>
		</div>
	</div>
	<!-- <div class="modal fade" id="sendmsg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
		    <div id="exampleModal_title" class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="exampleModalLabel">提问</h4>
		    </div>
	        <form id="sendMsgForm" action="/msg" method="post">
		        <div class="modal-body">
		          	<div class="form-group" style="position: relative;">
			            <input type="text" name="rece_name" class="form-control" placeholder="收信人名称" id="recipient-name">
			            <div id="name_list"></div>
		          	</div>
		          	<div class="form-group">
			            <label for="message-text" class="control-label">内容</label>
			            <textarea name="desc" class="form-control" id="message-text"></textarea>
		          	</div>
		        </div>
		        <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button id="sendMsgBtn" type="button" class="btn btn-primary">发送</button>
		        </div>
	        </form>
	        <script>
	        	$(function(){
	        		var SEND = false;
	        		$('#sendMsgForm input[name=rece_name]').keyup(function(){
	        			if($(this).val()){
		        			checkName($(this));
	        			}
	        		});
	        		$('#sendMsgBtn').click(function() {
	        			if(SEND){}
	        			return false;
	        		});
	        	});
	        	$('#name_list ul li');
	        	function checkName(input){
	        		$.ajax({
	    				url: '/api/checkName',
	    				type: 'post',
	    				dataType: 'json',
	    				data: {name : input.val() },
	    				success: function(res){
	    					if(res){
	    						var list = '<ul class="list-unstyled">';
	    						for(var i=0;i<res.length;i++){
	    							list += '<li>'+res[i].name+'</li>';
	    						}
	    						list += '</ul>';
	        					$('#name_list').html(list)
	    					}else{
	    						$('#name_list').html('<span class="alert-danger">用户不存在!</span>');
	    					}
	    				}
	    			});
	        	}
	        </script>
	    </div>
	  </div>
	</div> -->
	<!-- <div class="inbox-alert col-md-4">
		<div class="col-md-12">
			<div class="alert alert-success" role="alert">
			担心骚扰？可以 <a href="#" class="alert-link">设置 </a>为「开启陌生人私信箱」。
			</div>
		</div>
	</div> -->
</div>
@endsection